<template>
    <div class="logisticsCompany">
        <Row>
            <Col span="24">
                <Form ref="freightRateListRef" :model="logisticsCompanyForm" :rules="logisticsCompanyRule" >
                    <div class="createMall-box">
                        <Row class="mt-10">
                            <Col span="22">
                                <Form-item prop="searchModel">
                                    <Input placeholder="请输入公司名称" :maxlength=20 v-model="logisticsCompanyForm.searchModel" style="width:200px"  @on-enter="searchEnter" enter-button/> 注:按回车键进行搜索
                                </Form-item>    
                            </Col>
                            <Col span="2">
                                    <Button type="primary" @click.native="openLogist">添加</Button>
                            </Col>
                        </Row> 
                    </div>
                </Form>
                <Table :columns="logisticsColumns" :data="logisticsData"></Table>
                    <Page
                    ref="freightRateListPage"
                    :total="logistics.totalElements"
                    :page-size="logistics.size"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    show-sizer
                    :page-size-opts="[5, 10, 20, 30, 40]"
                    show-total
                    style="margin-top:30px;text-align:center;">
                </Page>
                <!-- 新增/编辑弹窗 -->
                <Modal v-model="addFreightRateModel" :mask-closable="false">
                    <p slot="header">
                        <span>{{logisticsTitle}}</span>
                    </p>
                    <div>
                        <Form ref="freightRateListRef" :model="AddLogisticsForm" :rules="AddLogisticsCompanyRule">
                                <FormItem label="公司名称" prop="companyName">
                                <Input v-model="AddLogisticsForm.companyName" :maxlength="15" placeholder="请输入公司名称" style="width: 400px"/>
                            </FormItem>
                                <FormItem label="配送描述" prop="context">
                                <Input v-model="AddLogisticsForm.context" type="textarea" :autosize="{minRows: 2,maxRows: 4}" placeholder="请输入配送描述" style="width: 400px" />
                            </FormItem>
                        </Form>
                    </div>
                    <div slot="footer" class="footer ta-c">
                        <Button type="primary" @click="submitLogist('freightRateListRef')" :loading="submitLoading">提交</Button>
                        <Button type="primary" @click.native="closeLogist">取消</Button>
                    </div>
                </Modal>
            </Col>
        </Row>
        <Spin size="large" fix v-show="logistics.showSpin">
            请稍后....
        </Spin>
    </div>
</template>
<script>
export default {
    name: 'logisticsCompany',
    props: ['shopIds'],
    data () {
        return {
            shopId: '',
            // 弹窗标题
            logisticsTitle: '添加物流公司',
            // 提交时候的loading状态
            submitLoading: false,
            // 搜索
            logisticsCompanyForm: {
                searchModel: ''
            },
            logisticsCompanyRule: {
                searchModel: [
                    { message: '请输入公司名称', trigger: 'blur' },
                    { type: 'string', max: 15, message: '最多输入15个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '只能输入汉字数字英文', trigger: 'blur' }
                ]
            },
            // 分页
            logistics: {
                name: '',
                totalElements: 1,
                page: 0,
                size: 10,
                showSpin: false
            },
            // 列表树
            logisticsColumns: [
                {
                    title: '编号',
                    align: 'center',
                    minWidth: 150,
                    key: 'deliveryNo',
                    tooltip: true
                },
                {
                    title: '公司名称',
                    key: 'companyName',
                    minWidth: 120,
                    align: 'center',
                    tooltip: true
                },
                {
                    title: '配送方式',
                    key: 'context',
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: '更新时间',
                    key: 'updateTime',
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: '是否启用',
                    key: 'isActive',
                    align: 'center',
                    minWidth: 150,
                    render: (h, params) => {
                        return h('i-switch', {
                            props: {
                                value: params.row.isActive
                            },
                            on: {
                                'on-change': (value) => {
                                    this.SwitchChange(params.row.id, value);
                                }
                            }
                        }, [
                            h('span', {
                                slot: 'open',
                                domProps: {
                                    innerHTML: '开'
                                }
                            }),
                            h('span', {
                                slot: 'close',
                                domProps: {
                                    innerHTML: '关'
                                }
                            })
                        ]);
                    }}, {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: 200,
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                            }, [
                                h('Button', {
                                    props: {
                                        align: 'center',
                                        type: 'primary'
                                    },
                                    on: {
                                        click: () => {
                                            this.editorLogist(params.row);
                                        }
                                    }

                                }, '编辑')
                            ]),
                            h('span', {
                            }, [
                                h('Button', {
                                    props: {
                                        align: 'center',
                                        type: 'primary'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteLogistics(params.row.id);
                                        }
                                    }

                                }, '删除')
                            ])
                        ]);
                    }
                }
            ],
            // 列表树data
            logisticsData: [],
            // 添加物流公司
            addFreightRateModel: false,
            AddLogisticsForm: {
                companyName: '', // 公司名称
                context: '' // 配送描述
            },
            AddLogisticsCompanyRule: {
                companyName: [
                    { message: '请输入公司名称', trigger: 'blur' },
                    { type: 'string', max: 15, message: '最多输入15个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '只能输入汉字数字英文', trigger: 'blur' }
                ],
                context: [
                    { required: true, message: '请输入产品说明', trigger: 'blur' },
                    { type: 'string', max: 500, message: '最多输入500个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[\u4e00-\u9fa5:',!();\-\-，。；【】（）！a-zA-Z0-9_{}]*$/, message: '您输入的格式有误,特殊字符只包括（）：，。！- {} 【】“”', trigger: 'blur' }
                ]

            }

        };
    },
    mounted () {
        this.shopId = this.$route.query.id;
        this.logisticsList();
    },
    methods: {

        logisticsList () {
            let vue = this;
            // LIST_SELLER_DELIVERY_BY_SHOP_ID_PAGE
            console.log(vue.shopId, ';ooo');
            depot.get({
                url: vue.URL.EC_SELLER.LIST_SELLER_DELIVERY_BY_SHOP_ID_PAGE + '?shopId=' + vue.shopId +
                '&page=' + this.logistics.page + '&size=' + this.logistics.size + '&companyName=' + this.logisticsCompanyForm.searchModel,
                cb: (data) => {
                    if (data.code === 0) {
                        if (data.code === 0) {
                            this.logisticsData = data.data.content;
                            this.logistics.size = data.data.size;
                            this.logistics.totalElements = data.data.totalElements;
                        } else {
                            vue.$Message.error(data.message);
                        }
                    }
                }
            });
        },
        // 搜索
        searchEnter () {
            this.logisticsList();
        },
        // 分页
        changePage (val) {
            this.logistics.page = val - 1;
            this.logisticsList();
        },
        changePageSize (val) {
            this.logistics.size = val;
            this.logisticsList();
        },
        // 是否启用
        SwitchChange (id, value) {
            console.log(value);
            this.logistics.showSpin = true;
            let ids = [id];
            depot.post({
                url: this.URL.EC_SELLER.UPDATE_ACTIVE_BY_IDS + '?isActive=' + value,
                data: ids,
                cb: (data) => {
                    if (data.code === 0) {
                        this.$Message.success('修改状态成功');
                        this.logistics.showSpin = false;
                        this.logisticsList();
                    }else {
                        this.$Message.error(message.error);
                    }
                },
ce: (error) => {
                    this.$Message.error(message.error);
                }
            });
        },
        // 删除
        deleteLogistics (params) {
            this.logistics.showSpin = true;
            depot.get({
                url: this.URL.EC_SELLER.DEL_SELLER_DELIVERY + '?id=' + params,
                cb: (data) => {
                    if (data.code === 0) {
                        this.$Message.success('删除成功');
                        this.logistics.showSpin = false;
                        this.logisticsList();
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                        this.logistics.showSpin = false;
                    }
                },
                ce: (error) => {
                }
            });
        },
        // 打开 新增
        openLogist () {
            this.addFreightRateModel = true;
            this.AddLogisticsForm = {};
            this.logisticsTitle = '添加物流公司';
        },
        // 打开 编辑
        editorLogist (row) {
            this.AddLogisticsForm = row;
            this.addFreightRateModel = true;
            this.logisticsTitle = '编辑物流公司';
            console.log(row, '当前信息');
        },
        // 关闭添加的弹窗
        closeLogist () {
            this.addFreightRateModel = false;
            // this.$refs['freightRateListRef'].resetFields();
            if (this.logisticsTitle == '添加物流公司') {
                this.$refs['freightRateListRef'].resetFields();
            }
        },
        // 提交添加的弹窗
        submitLogist (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    console.log(this.AddLogisticsForm, 'this.AddLogisticsForm');
                    this.submitLoading = true;
                    this.AddLogisticsForm.shopId = this.shopId;
                    depot.post({
                        url: this.URL.EC_SELLER.SAVE_SELLER_DELIVERY,
                        data: this.AddLogisticsForm,
                        cb: (data) => {
                            if (data.code === 0) {
                                this.$Message.success('提交成功');
                                this.submitLoading = false;
                                this.addFreightRateModel = false;
                                this.logisticsList();
                                this.$refs['freightRateListRef'].resetFields();
                            } else{

                            }
                        },
ce: (error) => {
                            this.$Message.error(message.error);
                            this.submitLoading = false;
                        }
                    });
                }
            });
        }
    },
    watch: {
        shopIds (newVal, oldVal) {
            if (newVal) {
                this.shopId = newVal;
                this.logisticsList();
            }
            console.log(this.shopId, 'ppp');
        }
    }
};
</script>
<style lang="less" scoped>
    .logisticsCompany{

    }
</style>


